<!-- 物业公司 -->
<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="app-title">物业公司</div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="物业公司">
					<el-select v-model="formInline.wuye_id" placeholder="请选择" clearable @change="sousuo()">
						<el-option :label="item.wy_name" :value="item.id" v-for="(item, index) in wuyeList"
							:key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="formInline.state" placeholder="请选择" clearable @change="sousuo()">
						<el-option label="正常" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间筛选">
					<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="sousuo()"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="sousuo()" icon="el-icon-search">查询/筛选</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="isAdd = true" icon="el-icon-circle-plus-outline">添加</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="introduce" label="简称"></el-table-column>
				<el-table-column prop="wy_name" label="物业名称"></el-table-column>
				<el-table-column prop="address" label="公司地址"></el-table-column>
				<el-table-column prop="contacts" label="联系人"></el-table-column>
				<el-table-column prop="tel" label="公司电话"></el-table-column>
				<el-table-column prop="xq_count" label="小区数量"></el-table-column>
				<el-table-column prop="createtime" label="创建时间" width="100px"></el-table-column>
				<el-table-column prop="nick_name" label="关联服务号"></el-table-column>
				<el-table-column prop="qy_name" label="关联企业号"></el-table-column>
				<el-table-column label="搜索状态" width="80px">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.state == 1" @change="openShitch(scope.row.id,scope.row.state)">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80px">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="openInfo(scope.row)">详情</el-button>
					</template>
				</el-table-column>
				<!-- <el-table-column label="商城管理" width="80px" align="center">
					<template slot-scope="scope">
						<el-switch :value="scope.row.mall_switch" @change="openShitch2(scope.row)"></el-switch>
						<el-button v-if="scope.row.mall_switch" type="text" size="small" @click="toShop(scope.row)">查看</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<div class="el-pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 100, 200, 300, 400]" :page-size="size"
					layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
			</div>
		</div>
		<my-info @close="closeInfo" v-if="isInfo" :data="item"></my-info>
		<my-add @close="closeAdd" v-if="isAdd"></my-add>
		<shop-config @close="closeConfig" v-if="isConfig" :data="item"></shop-config>
		
	</div>
</template>

<script>
	import Api from '@/api/pages/wuye/wuye.js';
	import myInfo from './wuye-list-info.vue';
	import myAdd from './wuye-list-add.vue';
	import shopConfig from './shop-config.vue';
	export default {
		name: 'wuye-list',
		components: {
			myInfo,
			myAdd,
			shopConfig
		},
		data() {
			return {
				dialogVisible: false,
				isInfo: false,
				isAdd: false,
				isConfig:false,
				item: '',
				formInline: {
					wuye_id: '',
					start_time: '',
					end_time: '',
					state: ''
				},
				form: {},
				page: 1,
				size: 10,
				total: 0,
				date: [],
				tableData: [],
				wuyeList: []
			};
		},
		mounted() {
			this.getData();
			this.getWuyeList();
		},
		methods: {
			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size
				};
				if (this.formInline.state) {
					data['state'] = this.formInline.state;
				}
				if (this.formInline.wuye_id) {
					data['wuye_id'] = this.formInline.wuye_id;
				}
				if (this.date && this.date.length) {
					data['start_time'] = this.date[0];
					data['end_time'] = this.date[1];
				}
				Api.query(data).then(res => {
					if (res.state) {
						this.tableData = res.data.list;
						this.total = res.data.totalRow;
					} else {
						this.$message(res.msg);
					}
				});
			},
			// 修改搜索状态
			upstate(id, state) {
				Api.upstate({
					id: id,
				}).then(res => {
					if (res.state) {
						this.$message({
							message: res.msg,
							type: 'success'
						});
					} else {
						this.$message(res.msg);
					}
					this.getData();
				});
			},
			// 获取物业公司
			getWuyeList() {
				Api.getWuyeList().then(res => {
					if (res.state) {
						this.wuyeList = res.data;
					} else {
						this.$message(res.msg);
					}
				});
			},
			// 打开修改搜索状态询问
			openShitch(id, state) {
				let upState = 1
				if (state == 1) {
					upState = 2
				}
				this.$confirm('您确定对当前状态进行修改吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.upstate(id, upState);
					})
					.catch(() => {});
			},
			
			// 打开商城
			openShitch2(data){
				// console.log(data)
				this.item = JSON.parse(JSON.stringify(data));
				this.isConfig = true;
			},
			
			// 跳转商城管理
			toShop(item) {
				localStorage.setItem('wuye',JSON.stringify(item));
				this.$router.push({
					path: '/wuye/shop'
				})
			},
			sousuo() {
				this.page = 1;
				this.getData();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val;
				this.getData();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val;
				this.getData();
			},
			openInfo(data) {
				this.item = data;
				this.isInfo = true;
			},
			closeInfo() {
				this.isInfo = false;
			},
			closeAdd() {
				this.isAdd = false;
			},
			closeConfig(){
				this.isConfig = false;
			}
		}
	};
</script>
<style lang="scss" scoped></style>

<style lang="scss">
	.dialogVideo {
		.el-dialog__body {
			padding: 20px;
		}
	}
</style>
